<template>
  <div class="bigbox">
    <!-- 固定定位按钮 -->
    <div class="button" v-if="!$route.query.name">
      <el-button size="small" type="primary" @click="tuisong">推 送</el-button>
      <el-button size="small" type="primary" @click="dayin">打 印</el-button>
    </div>
    <!-- title文字 -->
    <div class="title">{{ entity.reportName }}</div>
    <!-- 概括 -->
    <div class="gaikuo">
      <span>巡视人员：{{ entity.xsfzrName }}</span>
      <span>巡视成员：{{ entity.xscyName }}</span>
      <span>签名：</span>
      <img v-if="fileData" class="baseimg" :src="'data:image/png;base64,' + fileData" alt="">
    </div>
    <!-- 巡视问题概括 -->
    <div class="troublegaiku">
      <!-- <p>{{ entity.content?.split(':')[0] }}:</p>
      <p v-for="(item,index) in able" :key="index">
      {{ item }}
      </p> -->
      <el-input
        type="textarea"
        style="width: 90%; margin: 15px 0"
        autosize
        v-model="entity.content"
      >
      </el-input>
    </div>
    <!-- 巡视问题详情 -->
    <div
      class="xiang"
      v-for="(item, index) in roomList"
      :key="index"
      style="margin-bottom: 20px"
    >
      <div class="titl" style="font-size: 18px">
        #{{ index + 1 }} &nbsp;&nbsp; {{ item.deviceName }}
      </div>
      <div class="tex textarea">
        <el-input
          type="textarea"
          style="width: 90%; margin: 15px 0; border: none"
          autosize
          v-model="item.overview"
        ></el-input>
      </div>
      <!-- 问题表格 计量柜-->
      <div class="trouble">
        <span class="span"></span> <span>1.1</span> <span> 计量柜 </span>
        <div class="tab">
          <template>
            <el-table
            :span-method="(params) => objectSpanMethod(params, item.jlgList)"
              :data="processedData(item.jlgList)"
              border
              :header-cell-style="{ background: '#f5f5f5' }"
              style="width: 100%; margin-top: 20px"
            >
              <el-table-column prop="deviceName" label="主设备">
              </el-table-column>
              <el-table-column prop="deviceCheckResult" label="结果">
              </el-table-column>
              <el-table-column prop="subDeviceName" label="子设备">
              </el-table-column>
              <el-table-column prop="checkName1" label="检查项目">
              </el-table-column>
              <el-table-column prop="checkResult1" label="结果">
              </el-table-column>
              <el-table-column prop="checkName2" label="检查项目">
              </el-table-column>
              <el-table-column prop="checkResult2" label="结果">
              </el-table-column>
              <el-table-column prop="checkName3" label="检查项目">
              </el-table-column>
              <el-table-column prop="checkResult3" label="结果">
              </el-table-column>
            </el-table>
          </template>
        </div>
      </div>
      <!-- 配电柜 -->
      <div class="trouble">
        <span class="span"></span> <span>1.2</span> <span> 配电柜 </span>
        <div class="tab">
          <template>
            <el-table
              :span-method="(params) => objectSpanMethod(params, item.pdgList)"
              :data="processedData(item.pdgList)"
              :header-cell-style="{ background: '#f5f5f5' }"
              border
              style="width: 100%; margin-top: 20px"
            >
              <el-table-column prop="deviceName" label="主设备">
              </el-table-column>
              <el-table-column prop="checkResult" label="结果">
              </el-table-column>
              <el-table-column prop="subDeviceName" label="子设备">
              </el-table-column>
              <el-table-column prop="checkName1" label="检查项目">
              </el-table-column>
              <el-table-column prop="checkResult1" label="结果">
              </el-table-column>
              <el-table-column prop="checkName2" label="检查项目">
              </el-table-column>
              <el-table-column prop="checkResult2" label="结果">
              </el-table-column>
              <el-table-column prop="checkName3" label="检查项目">
              </el-table-column>
              <el-table-column prop="checkResult3" label="结果">
              </el-table-column>
            </el-table>
          </template>
        </div>
      </div>
      <!-- 变压器 -->
      <div class="trouble">
        <span class="span"></span> <span>1.3</span> <span>变压器</span>
        <div class="tab">
          <template>
            <el-table
              :span-method="(params) => objectSpanMethod(params, item.byqList)"
              :data="processedData(item.byqList)"
              :header-cell-style="{ background: '#f5f5f5' }"
              border
              style="width: 100%; margin-top: 20px"
            >
              <el-table-column prop="deviceName" label="主设备">
              </el-table-column>
              <el-table-column prop="deviceCheckResult" label="结果">
              </el-table-column>
              <el-table-column prop="subDeviceName" label="子设备">
              </el-table-column>
              <el-table-column prop="checkName1" label="检查项目">
              </el-table-column>
              <el-table-column prop="checkResult1" label="结果">
              </el-table-column>
              <el-table-column prop="checkName2" label="检查项目">
              </el-table-column>
              <el-table-column prop="checkResult2" label="结果">
              </el-table-column>
              <el-table-column prop="checkName3" label="检查项目">
              </el-table-column>
              <el-table-column prop="checkResult3" label="结果">
              </el-table-column>
            </el-table>
          </template>
        </div>
      </div>
      <!-- 安全用具以及环境 -->
      <div class="huanan" style="display: flex">
        <div style="width: 50%">
          <div><span class="span"></span>1.4 环境</div>
          <div>
            <template>
              <el-table
                :data="item.envList"
                border
                :header-cell-style="{ background: '#f5f5f5' }"
                style="width: 70%; margin-top: 20px"
              >
                <el-table-column prop="deviceName" label="检查项目">
                </el-table-column>
                <el-table-column prop="checkResult" label="结果">
                </el-table-column>
              </el-table>
            </template>
          </div>
        </div>
        <div style="width: 50%">
          <div><span class="span"></span>1.5 安全用具</div>
          <div>
            <template>
              <el-table
                :data="item.toolList"
                border
                :header-cell-style="{ background: '#f5f5f5' }"
                style="width: 70%; margin-top: 20px"
              >
                <el-table-column prop="deviceName" label="检查项目">
                </el-table-column>
                <el-table-column prop="checkResult" label="结果">
                </el-table-column>
              </el-table>
            </template>
          </div>
        </div>
      </div>
      <!-- 所存在问题以及处理情况 -->
      <div>
        <div><span class="span"></span>1.6 所存在问题以及处理情况</div>
        <div>
          <el-input
            type="textarea"
            style="width: 70%; margin: 15px 0"
            :rows="3"
            v-model="item.handlingInformation"
          >
          </el-input>
        </div>
      </div>
      <div>
        <div><span class="span"></span>1.7 巡视小结及建议</div>
        <div>
          <el-input
            type="textarea"
            style="width: 70%; margin: 15px 0"
            :rows="3"
            v-model="item.summary"
          >
          </el-input>
        </div>
      </div>
      <div style="margin-bottom: 15px">
        <div><span class="span"></span>1.8 附件</div>
        <div class="fujian">
          <template v-if="item.attachments.length">
            <div v-for="(items,index) in item.attachments" :key="index" >
              <img  :src="'data:image/png;base64,' + items.url" alt="">
            </div>
          </template>
          <div v-else>无</div>
        </div>
      </div>
    </div>
    <div v-if="$route.query.name" style="text-align: center">
      <el-button size="small" @click="$router.back()">返 回</el-button>
      <el-button size="small" type="primary" @click="baocun">保 存</el-button>
    </div>
  </div>
</template>
<script>
import { getgeytoimgapi} from '@/api/system/WorkManage'
import axios from 'axios'
import download from 'downloadjs'
import { getxiangqingapi, getbaocunapi, posttuisongapi,getSignFileByTaskId } from '@/api/inspection'
export default {
  name: 'CallPoliceLiuLanye',
  data() {
    return {
      entity: {},
      able: [],
      roomList: [],
      fileData:''
    }
  },

  async mounted() {
    this.getobject()
  },

  methods: {
    async getobject() {
      const loading = this.$loading({
          lock: true,
          text: '数据加载中',
          spinner: 'el-icon-loading',
        });
        console.log(this.$store.state.ChildrenReport.taskId,6666);
        
        const {data:{entity:{fileData}}}=await getSignFileByTaskId({taskId:this.$store.state.ChildrenReport.taskId})
        this.fileData=fileData
      const res = await getxiangqingapi({
        id: this.$route.params.id ? this.$route.params.id : this.$route.query.id
      })
      this.entity = res.data.entity
      const roomList = res.data.entity.roomList?res.data.entity.roomList:[]
      for (const ele of roomList) {
        for (const item of ele.attachments) {
          try {
            const { data: { entity: { fileData } } } = await getgeytoimgapi(item.documentId);
            item['url'] = fileData;
          } catch (error) {
            console.error('获取图片数据失败:', error);
          }
        }
      }
      this.roomList = roomList;
      loading.close();
    },
    // 打印导出pdf文件
    async dayin() {
      await axios({
        method: 'post',
        url: '/biz/pio-microservice-biz/pio/tour-report/download/pdf',
        params: {
          id: this.$route.params.id
        },
        responseType: 'blob'
      }).then((res) => {
        const blob = new Blob([res.data], { type: 'application/pdf' })
        download(blob, `${this.entity.reportName}.pdf`)
      })
    },
    // 获取全部配电柜
    processedData(list) {
      if (!list || !Array.isArray(list)) return [];
      return list.flatMap(item => {
        if (!item.deviceRowList) return [];
        return item.deviceRowList.map(row => ({
          ...item,          // 保留主设备信息
          ...row,           // 保留子设备信息
          subDeviceName: item.deviceName, // 强制子设备名与主设备名一致
          deviceCheckResult: item.checkResult || item.deviceCheckResult
        }));
      });
    },
    async baocun() {
      await getbaocunapi(this.entity)
      this.getobject()
      this.$message.success('保存成功')
    },
    // 推送
    async tuisong() {
      await posttuisongapi({ id: this.$route.params.id })
    },
    async getimg(item) {
      const {data:{entity:{fileData}}}=await getgeytoimgapi(item.documentId)
      console.log(fileData);
      return fileData
    },
    objectSpanMethod({row, column, rowIndex, columnIndex  }, data) {
      const dataList = this.processedData(data);
      if (columnIndex < 3) {
        const mergeField = 'deviceName'; // 根据主设备进行合并
        // 检查是否需要开始合并
        if (rowIndex === 0 || row[mergeField] !== dataList[rowIndex - 1][mergeField]) {
          let rowspan = 1;
          // 计算连续相同值的行数
          while (
            rowIndex + rowspan < dataList.length &&
            row[mergeField] === dataList[rowIndex + rowspan][mergeField]
          ) {
            rowspan++;
          }
          return { rowspan, colspan: 1 };
        } else {
          return { rowspan: 0, colspan: 0 }; // 隐藏非起始单元格
        }
      }
      // 其他列（列索引 >=3）不合并
      return { rowspan: 1, colspan: 1 };
    }
  }
}
</script>

<style lang="scss" scoped>
.buttons {
  width: 60px;
  height: 30px;
  cursor: pointer;
  margin-right: 10px;
  background-color: #fff;
  border-radius: 3px;
  border: 1px solid #ccc;
}
.sure {
  background-color: #3b8eea;
  color: #fff;
}
.bigbox {
  margin: 10px;
  padding: 20px 40px;
  background-color: #fff;
  .button {
    position: fixed;
    right: 40px;
    top: 20px;
    z-index: 9;
    .click {
      width: 60px;
      height: 30px;
      background-color: #4095e5;
      color: #fff;
      line-height: 30px;
      border: none;
      border-radius: 3px;
      margin-left: 10px;
    }
  }
  .title {
    text-align: center;
    font-size: 25px;
  }
  .gaikuo {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      margin-left: 30px;
    }
    .baseimg{
      width: 100px;
      height: 50px;
    }
  }
  .xiang {
    .titl {
      font-weight: 500;
    }
    .text {
      text-indent: 2em;
    }
  }
  .trouble {
    margin-top: 20px;
    .span {
      display: inline-block;
      background-color: #4095e5;
      width: 3px;
      height: 16px;
    }
    .tab {
      margin-top: 15px;
    }
  }
  .troublegaikuo {
    margin: 50px 0 20px 0;
    border: 1px solid #ccc;
    border-radius: 3px;
    // width: 100%;
    padding: 10px;
  }
  .huanan {
    margin: 20px 0;
    .span {
      display: inline-block;
      background-color: #4095e5;
      width: 3px;
      height: 16px;
    }
  }
}
.textarea {
  ::v-deep .el-textarea__inner {
    border: none;
    color: black;
    font-size: 18px;
    font-weight: 600;
  }
}
.fujian{
  display: flex;
  img{
    width: 300px;
    height: 300px;
    margin: 10px;
  }
}
</style>
